<template>
  <div class="total-sales">
    <common-card title="累计用户数" value="1,087,503">
      <template>
        <diV
          id="total-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></diV>
      </template>
      <template slot="footer">
        <div class="total-user-footer">
          <span>日同比 </span>
          <span class="emphasis">8.73%</span>
          <div class="increase" />
          <span class="month">月同比</span>
          <span class="emphasis">35.91%</span>
          <div class="decrease" />
        </div>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCard from '@/components/CommonCard/Index.vue'
export default {
  components: {
    CommonCard
  },
  mounted() {
    const chartsDom = document.getElementById('total-users-chart')
    const charts = this.$echarts.init(chartsDom)
    charts.setOption({
      grid: {
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
      },
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        show: false
      },
      series: [
        {
          type: 'bar',
          stack: '总量',
          data: [100],
          barWidth: '10px',
          itemStyle: {
            color: '#45c946'
          }
        },
        {
          type: 'bar',
          stack: '总量',
          data: [250],
          itemStyle: {
            color: '#eee'
          }
        },
        {
          type: 'custom',
          data: [100],
          itemStyle: {
            color: '#45c946'
          },
          renderItem: (params, api) => {
            const value = api.value(0)
            const endPoint = api.coord([value, 0])
            console.log(params)
            console.log(endPoint)
            return {
              type: 'group',
              position: endPoint,
              children: [
                {
                  type: 'path',
                  shape: {
                    d: 'M1536 64H0l768 896z',
                    x: -5,
                    y: -15,
                    width: 10,
                    height: 10,
                    layout: 'center'
                  },
                  style: {
                    fill: '#1afa29'
                  }
                },
                {
                  type: 'path',
                  shape: {
                    d: 'M512 192l448 512H64z',
                    x: -5,
                    y: 5,
                    width: 10,
                    height: 10,
                    layout: 'center'
                  },
                  style: {
                    fill: '#1afa29'
                  }
                }
              ]
            }
          }
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.total-user-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>
<svg t="1697989383199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" width="200" height="200"><path d="M512 192l448 512H64z" fill="#1afa29" p-id="5067"></path></svg>
